<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom获取元素</title>
</head>
<body>
  <div>
    这是一个普通块级元素
  </div>
  <div class="content">
    这是第二个div
    <p>
      这是p标签
      <span>这是p标签内的span标签</span>
    </p>
    <span>
      这是第一个span标签
    </span>
  </div>

  <input type="text" name="username">

  <script>
    // 通过这个api可以获取到所有div标签的元素
    var divList = document.getElementsByTagName("div");
    for (var item of divList) {
      console.log(item.innerText)
    }
    // 可以根据标签名字获取标签
    console.log(divList)

    // 通过标签名来获取标签,可以通过标签name属性的值来获取dom集合
    var nameList = document.getElementsByName("username");
    console.log(nameList)

    // 可以通过样式获取dom
    var classList = document.getElementsByClassName("content");
    console.log(classList)

    // 通过css选择器获取对应元素,返回是一个匹配到这样样式选择器的元素
    var contentSpanList = document.querySelector(".content span");
    console.log(contentSpanList.innerText)
    // for (var item of contentSpanList) {
    //   console.log(item.innerText)
    // }
  </script>
</body>
</html>